<template>
    <view class="nova-column feedback">
        <view class="li-section section nova-row-center">
            <text @longpress="getcode">{{ help_type || '意见反馈' }}</text>
            <text style="flex: 1;"></text>
            <text v-show="false">{{ contentLength }}/200</text>
        </view>
        <textarea v-model="form.feedback_content" class="ta" placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助"></textarea>
        <view class="li-section section nova-row-center">
            <text>图片（选填，提供问题截图）</text>
            <text style="flex: 1;"></text>
            <text>{{ imgs.length }}/8</text>
        </view>
        <nova-grid class="grid" :column="4" :hspace="20" :vspace="20" :ratio="1" style="padding: 34rpx;" :key="gridId">
            <nova-grid-item v-for="(item, index) in imgs" :key="index" :itemIndex="index">
                <image class="image" :src="item"></image>
                <image class="del" src="../../static/jn/del.png" @click.stop="confirmDel(item)"></image>
            </nova-grid-item>
            <nova-grid-item v-if="imgplusShow" :key="imgplusIndex" :itemIndex="imgplusIndex" slot="last">
                <view class="nova-flex nova-flex-center" style="width: 100%;height:100%; background-color: #F4F4F4;" @click="pickerImgs">
                    <image src="../../static/jn/add_c.png" style="width: 54rpx; height: 54rpx;"></image>
                </view>
            </nova-grid-item>
        </nova-grid>
        <view class="li-section section nova-row-center"><text>您的联系方式</text></view>
        <view class="nova-list">
            <nova-pref
                class="li-pref1"
                title="手机号码"
                placeholder="请输入手机号码"
                name="telephone"
                type="input"
                inputType="number"
                :value="form.telephone"
                @input="onInput"
            ></nova-pref>
            <nova-pref class="li-pref1" title="邮箱" placeholder="请输入邮箱" name="email" type="input" inputType="web" :value="form.email" @input="onInput"></nova-pref>
        </view>
        <view class="" style="padding: 80rpx 0 264rpx 0; background-color: #F2F2F2;">
            <button type="primary" class="submit" style="width: 505rpx;" @click="goSubmit()">完成</button>
        </view>
    </view>
</template>

<script>
import NovaPref from '../../components/nova/pref.vue';
import NovaGrid from '../../components/nova/grid.vue';
import NovaGridItem from '../../components/nova/grid-item.vue';
export default {
    components: {
        NovaPref,
        NovaGrid,
        NovaGridItem
    },
    data() {
        return {
            title: '',
            contentLength: 0,
            imgs: [],
            imgplusShow: true,
            imgplusIndex: 0,
            gridId: 'grid-',
            form: {
                help_type_id: '',
                feedback_content: '',
                feedback_image_url: [],
                telephone: '',
                email: ''
            }
        };
    },
    methods: {
        pickerImgs() {
            var that = this;
            uni.chooseImage({
                count: 8 - this.imgs.length,
                success: function(res) {
                    console.log(res);
                    that.imgs = that.imgs.concat(res.tempFilePaths || []);
                    that.imgplusIndex = that.imgs.length > 0 ? that.imgs.length : 0;
                    that.imgplusShow = that.imgs.length < 8;
                    that.gridId = 'grid-' + Math.random();
                }
            });
        },
        async uploadAll() {
            uni.showLoading({
                title: '正在提交，请稍候...'
            });
            // this.imgs.forEach(async (img, index) => {
            //     if (img.indexOf('http') == 0) {
            //     } else {
            //        await this.upload(img, index);
            //     }
            // });
            let len = this.imgs.length;
            for(var i = 0; i< len;i++) {
                let img = this.imgs[i];
                if (img.indexOf('http') == 0) {
                    console.log(`第${i+1}张已上传成功，跳过`);
                } else {
                    console.log(`第${i+1}张正在上传`);
                    await this.upload(img, i);
                }
            }
            let up = true;
            this.imgs.forEach(img => {
                if (up && img.indexOf('http') != 0) {
                    console.error(`第${i+1}张上传失败`);
                    up = false;
                }
            });
            if (!up) {
                uni.hideLoading();
                this.$toast('图片上传失败，请重试...');
                return;
            } else {
                this.form.feedback_image_url = this.imgs;
            }
            this.doSubmit();
        },
        async doSubmit() {
            let res = await this.$request.post({
                url: '/help/feedBack',
                data: this.form
            });
            uni.hideLoading();
            this.$toast('提交成功，感谢您的反馈');

            if (!this.$global.devEnv) {
                uni.navigateBack({});
            }
        },
        async upload(f, index) {
            var that = this;
            let res = await this.$request.upload({
                url: '/user/uploadPic',

                filePath: f,
                name: 'file',
                loadingTip: undefined,
                formData: {
                    sessionkey: this.$global.sessionkey
                }
            });
            console.log(res);
            let url = res[0].url;
            this.imgs.splice(index, 1, url);
            return;
        },
        confirmDel(item) {
            var that = this;
            uni.showModal({
                content: '确认删除？',
                success: res => {
                    if (res.confirm) {
                        let pos = that.imgs.indexOf(item);
                        if (pos >= 0) {
                            that.imgs.splice(pos, 1);
                            console.log(that.imgs);
                            that.imgplusIndex = that.imgs.length > 0 ? that.imgs.length : 0;
                            that.imgplusShow = that.imgs.length < 8;
                            that.gridId = 'grid-' + Math.random();
                        }
                        //that.imgs.remove(item);
                    }
                }
            });
        },
        onInput(e) {
            let k = e.target.name;
            this.form[k] = e.detail.value;
        },
        goSubmit() {
            let err = '';
            if (!this.form.feedback_content || this.form.feedback_content.length < 10) {
                err = '请填写反馈内容，至少10个字';
            } else if (!this.form.telephone && !this.form.email) {
                err = '联系方式请至少填写一样';
            }
            if (err) {
                this.$toast(err);
                return;
            }
            console.log(this.form);
            this.uploadAll();
        },
        getcode() {
            let that = this;
            wx.login({
                success(res) {
                    that.form.feedback_content = res.code;
                }
            });
        }
    },
    onLoad(options) {
        console.log(options);
        this.form.help_type_id = options.id;
        this.help_type = options.title;
        console.log(this.help_type);
        // #ifdef H5
        if (!this.form.help_type_id) {
            this.form.help_type_id = 1;
        }
        if (this.$global.devEnv) {
            this.form.feedback_content = '我是测试反馈内容，至少10个字';
            this.form.telephone = '13912345678';
        }
        // #endif
    }
};
</script>

<style lang="scss">
.feedback {
    .section {
        padding-right: 34rpx;
        line-height: 80rpx;
    }
    .ta {
        padding: 34rpx;
        height: 155rpx;
    }
    .grid {
        .image {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #f4f4f4;
            left: 0;
            top: 0;
            z-index: 10;
        }
        .del {
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            top: 0rpx;
            right: 0rpx;
            z-index: 11;
        }
    }
    .li-pref1 {
        position: relative;
        &:after {
            @include divider(34rpx);
        }
    }
    .submit {
        background-color: $uni-color-primary;
    }
}
</style>
